<template>
  <div class="repositories-page">
    <div class="page-container">
      <div class="page-header">
        <h2 class="page-title">代码库管理</h2>
        <div class="header-actions">
          <el-button type="primary" @click="$router.push('/repositories/create')">
            <el-icon><Plus /></el-icon>
            添加代码库
          </el-button>
          <el-button @click="fetchRepositories">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>

      <!-- 代码库列表 -->
      <el-table
        :data="repositories"
        v-loading="loading"
        element-loading-text="加载中..."
        empty-text="暂无代码库"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="仓库名称" />
        <el-table-column prop="url" label="仓库地址" show-overflow-tooltip />
        <el-table-column prop="platform" label="平台" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.platform }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.type === 'source' ? 'success' : 'primary'">
              {{ scope.row.type === 'source' ? '源库' : '目标库' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="连接状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'connected' ? 'success' : 'danger'">
              {{ scope.row.status === 'connected' ? '已连接' : '未连接' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="添加时间" width="180">
          <template #default="scope">
            {{ formatDateTime(scope.row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <div class="table-actions">
              <el-button size="small" @click="testConnection(scope.row.id)">
                测试连接
              </el-button>
              <el-button size="small" @click="editRepository(scope.row.id)">
                编辑
              </el-button>
              <el-button size="small" type="danger" @click="deleteRepository(scope.row.id)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { repositoryApi } from '../api'

const router = useRouter()

const repositories = ref([])
const loading = ref(false)

const fetchRepositories = async () => {
  loading.value = true
  try {
    const response = await repositoryApi.getRepositories()
    repositories.value = response.data?.items || []
  } catch (error) {
    console.error('获取代码库列表失败:', error)
    ElMessage.error('获取代码库列表失败')
  } finally {
    loading.value = false
  }
}

const testConnection = async (id) => {
  try {
    await repositoryApi.testConnection(id)
    ElMessage.success('连接测试成功')
    fetchRepositories()
  } catch (error) {
    console.error('连接测试失败:', error)
    ElMessage.error('连接测试失败')
  }
}

const editRepository = (id) => {
  router.push(`/repositories/${id}/edit`)
}

const deleteRepository = async (id) => {
  try {
    await repositoryApi.deleteRepository(id)
    ElMessage.success('代码库删除成功')
    fetchRepositories()
  } catch (error) {
    console.error('删除代码库失败:', error)
    ElMessage.error('删除代码库失败')
  }
}

const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

onMounted(() => {
  fetchRepositories()
})
</script>

<style scoped>
.header-actions {
  display: flex;
  gap: 12px;
}
</style>